<template>
  <div class="home-standard">
    <!-- 标题 -->
    <van-nav-bar left-text="家政服务标准" left-arrow @click-left="$router.back()" />
    <div class="subject">
      <van-cell-group>
        <van-cell>
          <div class="title">
            <span class="text">服务标准</span>
          </div>
        </van-cell>
        <!-- 区域 -->
        <!--服务区域 -->
        <van-cell class="didi" title="服务区域：">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>
        </van-cell>
        <!-- 服务类型 -->
        <van-cell title="服务类型：" class="fuwu">
          <van-tag
            slot="label"
            v-for="(item, i) in list"
            :key="i"
            round
            type="primary"
            size="medium"
            :class="{ active: i == 0 }"
            @click="fuWu(i)"
          >{{ item }}</van-tag
          >
        </van-cell>
      </van-cell-group>
      <br />
      <div class="biaozun">
        <!-- 星级标准 -->
        <van-cell title="星级标准：">
          <van-tag
            slot="label"
            round
            type="primary"
            size="medium"
            v-for="(k, i) in starlevel"
            :key="i"
            :class="{ active: i == nowIndex }"
            @click="nowIndex = i"
          >{{ k }}</van-tag
          >
        </van-cell>

      </div>

    </div>
    <div class="di" @click="finished()">家政服务标准查询</div>
  </div>
</template>

<script>

export default {
  name: 'HomeStandard',

  props: {},
  data () {
    return {
      list: ['月嫂', '育婴师', '保洁/清洁', '保姆', '产康师', '早教/托幼', '养老/陪护'],
      value1: 'a',
      option1: [
        { text: '湖南省长沙市岳麓区', value: 'a' },
        { text: '湖南省长沙市芙蓉区', value: 'b' },
        { text: '湖南省长沙市天心区', value: 'c' },
        { text: '湖南省长沙市开福区', value: 'd' },
        { text: '湖南省长沙市雨花区', value: 'e' },
        { text: '湖南省长沙市望城区', value: 'f' },
        { text: '湖南省长沙市长沙县', value: 'g' },
        { text: '湖南省浏阳市', value: 'h' },
        { text: '湖南省宁乡市', value: 'i' }

      ],
      nowIndex: 0,
      starlevel: ['一星', '二星', '三星', '四星', '五星', '金星']
    }
  },
  created () {
    // this.onl()
  },
  mounted () {},
  methods: {
    finished () {
      this.$toast('已查询 ！')
      this.$router.push('/homeStaff')
    },
    fuWu (i) {
      // 获取到对应的div
      const tags = document.querySelectorAll('.fuwu .van-tag')
      tags[i].classList.toggle('active')
    }
  }
}
</script>

<style scoped lang="less">
.home-standard {
  .title{
    &::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 26px;
      background-color: rgba(63, 81, 181, 100);
       vertical-align: middle;
    }
    .text {
      display: inline-block;
      margin-left: 20px;
      width: 125px;
      height: 50px;
      color: rgba(16, 16, 16, 100);
      font-size: 28px;
    }
  }
  .van-nav-bar {
    height: 180px;
    background-color: #3f51b5;
    /deep/.van-nav-bar__left {
      padding-top: 38px;

      .van-icon {
        color: rgba(255, 255, 255, 100);
        font-size: 36px;
      }

      .van-nav-bar__text {
        color: rgba(255, 255, 255, 100);
        font-size: 32px;
        font-weight: 600;
      }
    }
  }
  .subject {
    position: absolute;
    top: 126px;
    left: 26px;
    height: 750px;
    width: 696px;
    background-color: #fff;
    margin: 0 auto;
    z-index: 2;
  }
  /deep/.van-dropdown-menu__item {
    position: absolute;
    // right: 20px;
    bottom: 20px;
  }

  /deep/.van-tag--primary {
    margin: 8px 17px;
    padding: 6px 20px;
    color: rgba(151, 145, 145, 100);
    border: 1px solid rgba(151, 145, 145, 100);
    background-color: #fff;
  }
  .di {
    position: absolute;
    bottom: 0px;
    height: 98px;
    width: 100%;
    background-color: #3f51b5;
    color: #fff;
    line-height: 98px;
    text-align: center;
    font-size: 28px;
  }

  .active {
    color: #fff;
    background-color: #3f51b5;
  }
  .didi {
    line-height: 97px;
  }
}
</style>
